<template>
  <div id="role-card">
    <el-card shadow="hover">
      <!-- 添加按钮 -->
      <div slot="header" class="clearfix">
        <el-button type="primary" @click="dialogFormVisible = true">添加身份</el-button>
      </div>

      <!-- 添加上身份模态框 -->
      <el-dialog :modal="false" title="添加身份" :visible.sync="dialogFormVisible">
        <el-form :model="addform" label-width="80px">
          <el-form-item label="姓名" label-width="30%">
            <el-input v-model="addform.nickname" autocomplete="off"></el-input>
          </el-form-item>
          <el-form-item label="账号" label-width="30%">
            <el-input v-model="addform.account" autocomplete="off"></el-input>
          </el-form-item>
          <el-form-item label="电话" label-width="30%">
            <el-input v-model="addform.phone" autocomplete="off"></el-input>
          </el-form-item>
          <el-form-item label="身份" label-width="30%">
            <el-select v-model="addform.user_role" placeholder="选择身份">
              <el-option label="超级管理员" value="1"></el-option>
              <el-option label="管理员" value="2"></el-option>
              <el-option label="普通用户" value="3"></el-option>
            </el-select>
          </el-form-item>
        </el-form>
        <div slot="footer" class="dialog-footer">
          <el-button @click="dialogFormVisible = false">取 消</el-button>
          <el-button type="primary" @click="addMan();dialogFormVisible = false">确 定</el-button>
        </div>
      </el-dialog>

      <!-- 查找表单 -->
      <el-input placeholder="请输入姓名或者账号" v-model="input2" class="input-with-select">
        <el-select
          style="width:100px;"
          class="el-select"
          v-model="select"
          slot="prepend"
          placeholder="请选择"
        >
          <el-option label="身份" value="1"></el-option>
          <el-option label="演示身份" value="2"></el-option>
        </el-select>
        <el-button slot="append" icon="el-icon-search"></el-button>
      </el-input>
      <!-- 表格数据 -->
      <Rolelistcontent/>
    </el-card>
  </div>
</template>

<script>
// 表格数据组件
import Rolelistcontent from '@/components/system/rolelistcontent'

import { mapMutations } from 'vuex'
export default {
  data () {
    return {
      dialogFormVisible: false,
      addform: {
        nickname: '',
        account: '',
        phone: '',
        user_role: ''
        // password: '',
        // confirmpassword: '',
        },
      input1: "",
      input2: "",
      select: "",
    }
  },
  created() {
    this.$http.getRole().then(res => {
      // console.log(res.data.data)
      // 向store存入role
      this.setRoleListData(res.data.data)
    }).catch(err => {
      this.$message({
        type: 'error',
        message: '加载角色数据失败!'
      })
    })
  },
  methods: {
    ...mapMutations('role',[
      'setRoleListData'
    ])
  },
  computed: {
  },
  components: {
    // role角色内容组件
    Rolelistcontent
  }
};
</script>

<style scoped>
#role-card {
  transform: translateY(20px);
  width: 90%;
  margin-top: 20px;
  margin: 0 5%;
}
.el-dialog{
  width:500px;
}

.clearfix:before,
.clearfix:after {
  display: table;
  content: "";
}
.clearfix:after {
  clear: both;
}
.input-with-select .el-input-group__prepend {
  background-color: #fff;
}
</style>